<template>
  <n-grid x-gap="12" :cols="2">
    <n-gi>
      <n-space vertical>
        <n-form ref="formRef">
          <n-form-item label="正向标签" path="vprompts">
            <n-scrollbar style="max-height: 100px ">
                <n-space>
                    <n-tag v-for="tag in form.vprompts"
                           type="success" closable @close="closePrompt(tag)">
                        {{tag.en}}[{{tag.zh}}]
                    </n-tag>
                </n-space>
            </n-scrollbar>
          </n-form-item>
          <n-form-item
              label="正向提示词"
          >
            <n-input type="textarea" style="height: 150px;"  v-model:value="form.prompts"/>
          </n-form-item>

          <n-form-item label="反向标签" path="vnegative_prompts">
            <n-scrollbar style="max-height: 100px ">
                <n-space>
                    <n-tag v-for="tag in form.vnegative_prompts"
                           type="error" closable @close="closeNegativePrompt(tag)">
                        {{tag.en}}[{{tag.zh}}]
                    </n-tag>
                </n-space>
            </n-scrollbar>
          </n-form-item>

          <n-form-item
              label="反向提示词"
              path="negative_prompts"
          >
            <n-input type="textarea" style="height: 150px;" :value="form.negative_prompts"/>
          </n-form-item>
                <n-button block type="primary" @click = "emitLoadPromptEvent">加载提示词</n-button>
        </n-form>
      </n-space>
    </n-gi>
    <n-gi>
      <n-tabs type="line" placement="left" size="large" animated>
        <n-tab-pane v-for="item in tagCategory" :name="item.categoryName" :tab="item.categoryName">
          <n-scrollbar style="height: calc(100vh - 150px); ">
            <div v-if="item.children.length > 0" v-for="secondItem in item.children" style="width: calc(70vh)" >
              <n-divider  title-placement="left">
                {{secondItem.categoryName}}
              </n-divider>
              <n-space>
                <n-tag
                       @click="selectPrompt(attribute)"
                       v-if="secondItem.attributes.length>0"
                       size="large"
                       v-for="attribute in secondItem.attributes"
                       style="cursor: pointer"
                       :type="attribute.checked ? 'success' : 'default'"
                       >
                  {{attribute.en}} [{{attribute.zh}}]
                </n-tag>
              </n-space>
            </div>
          </n-scrollbar>
        </n-tab-pane>
      </n-tabs>
    </n-gi>
  </n-grid>
</template>

<script setup lang="ts">
import {h, onMounted, reactive, ref, watch} from "vue";
import {NTag} from "naive-ui";
import {promptControllerApi} from '@/api/prompt/prompt.api'
import {defineEmits} from "vue/dist/vue";

const props = defineProps({
  prompt:{
    type: String
  },
  negativePrompt:{
    type: String
  },
  type:{
    type:String
  },
  code:{
    type:String
  }
})


const tagCategory = ref(null)
const scrollerWidth = ref(0)
const checked = ref(false)

const defaultPrompts = [
  { en: 'masterpiece', zh: '大师作品' },
  { en: 'best quality', zh: '最佳品质' },
  { en: 'top quality', zh: '最高质量' },
  { en: 'ultra highres', zh: '超高分辨率' },
  { en: '8k hdr', zh: '8k分辨率' },
  { en: '8k wallpaper', zh: '壁纸画质' },
  { en: 'RAW', zh: 'RAW照片' },
  { en: 'huge file size', zh: '大文件' },
  { en: 'intricate details', zh: '真实感' },
  { en: 'sharp focus', zh: '清晰聚焦' },
  { en: 'natural lighting', zh: '自然光线' },
  { en: 'realistic', zh: '写实' },
  { en: 'professional', zh: '专业的' },
  { en: 'delicate', zh: '精美' },
  { en: 'amazing', zh: '令人惊叹' },
  { en: 'CG', zh: '游戏CG' },
  { en: 'finely detailed', zh: '精细' },
  { en: 'beautiful detailed', zh: '细节' },
  { en: 'colourful', zh: '丰富多彩' },
]

const defaultNegativePrompts = [
  { en: 'paintings', zh: '绘画' },
  { en: 'sketches', zh: '素描' },
  { en: 'lowres', zh: '低分辨率' },
  { en: 'normal quality', zh: '普通质量' },
  { en: 'worst quality', zh: '差质量' },
  { en: 'low quality', zh: '低质量' },
  { en: 'cropped', zh: '裁剪' },
  { en: 'dot', zh: '斑点' },
  { en: 'mole', zh: '痣' },
  { en: 'ugly', zh: '丑陋' },
  { en: 'grayscale', zh: '灰度' },
  { en: 'monochrome', zh: '单色' },
  { en: 'duplicate', zh: '重复' },
  { en: 'morbid', zh: '病态' },
  { en: 'mutilated', zh: '残缺' },
  { en: 'missing fingers', zh: '缺失的手指' },
  { en: 'extra fingers', zh: '多余的手指' },
  { en: 'too many fingers', zh: '过多的手指' },
  { en: 'fused fingers', zh: '融合的手指' },
  { en: 'mutated hands', zh: '变异的手' },
  { en: 'bad hands', zh: '错误的手' },
  { en: 'poorly drawn hands', zh: '画的差的手' },
  { en: 'poorly drawn face', zh: '画的差的脸' },
  { en: 'poorly drawn eyebrows', zh: '画的差的眉毛' },
  { en: 'bad anatomy', zh: '错误的人体构造' },
  { en: 'cloned face', zh: '克隆脸' },
  { en: 'long neck', zh: '长脖子' },
  { en: 'extra legs', zh: '多余的腿' },
  { en: 'extra arms', zh: '多臂' },
  { en: 'missing arms missing legs', zh: '缺胳膊缺腿' },
  { en: 'malformed limbs', zh: '肢体畸形' },
  { en: 'deformed', zh: '变形' },
  { en: 'simple background', zh: '简单的背景' },
  { en: 'bad proportions', zh: '比例失调' },
  { en: 'disfigured', zh: '毁容' },
  { en: 'skin spots', zh: '皮肤斑点' },
  { en: 'skin blemishes', zh: '皮肤瑕疵' },
  { en: 'age spot', zh: '老年斑' },
  { en: 'bad feet', zh: '坏的脚' },
  { en: 'error', zh: '错误' },
  { en: 'text', zh: '文字' },
  { en: 'extra digit', zh: '多余的数字' },
  { en: 'fewer digits', zh: '更少的数字' },
  { en: 'jpeg artifacts', zh: '人造图' },
  { en: 'signature', zh: '签名' },
  { en: 'username', zh: '用户名' },
  { en: 'blurry', zh: '模糊' },
  { en: 'watermark', zh: '水印' },
  { en: 'mask', zh: '面罩' },
  { en: 'logo', zh: '徽标' },
]


const form = ref({
  vprompts:  [],
  prompts: '',
  negative_prompts: '',
  vnegative_prompts: []
})




const disposePrompts = (prompts:any) => {
  return prompts.map(prompt => prompt.en).join(', ')
}
const selectPrompt = (data:any) =>{
    console.log(data)
  let prompt = {en:data.en , zh: data.zh}
    data.checked = !data.checked
  // /* 仅英文判断 */
  if (data.checked) {
    if(!form.value.vprompts.some(item => item.en === prompt.en)) {
      form.value.vprompts.push(prompt)
      form.value.prompts = disposePrompts(form.value.vprompts)
    }
  } else {
      console.log(form.value.vprompts.some(item => item.en === prompt.en))
    if(form.value.vprompts.some(item => item.en === prompt.en)) {
      const index = form.value.vprompts.findIndex(item => item.en === prompt.en);
      if (index !== -1) {
        form.value.vprompts.splice(index, 1);
        form.value.prompts = disposePrompts(form.value.vprompts)
      }
    }
  }
}

const closePrompt = (prompt:any) =>{
    const index = form.value.vprompts.findIndex(item => item.en === prompt.en);
    if (index !== -1) {
       form.value.vprompts.splice(index, 1);
       form.value.prompts = disposePrompts(form.value.vprompts)
    }
    isPromptChecked()
}

const closeNegativePrompt = (prompt:any) =>{
    console.log(prompt);
    const index = form.value.vnegative_prompts.findIndex(item => item.en === prompt.en)
    if (index !== -1) {
        form.value.vnegative_prompts.splice(index, 1);
        form.value.negative_prompts = disposePrompts(form.value.vnegative_prompts)
    }
}

onMounted(() => {
  if(props.prompt!=null && props.prompt!=''){
    form.value.vprompts = props.prompt.split(',').map((item:any) => {
      return {en: item, zh: item}
    })
    form.value.prompts = disposePrompts(form.value.vprompts)
  }else {
    form.value.vprompts = Array.from(defaultPrompts)
    form.value.prompts = disposePrompts(form.value.vprompts)
  }
  if(props.negativePrompt!=null && props.negativePrompt!='') {
      form.value.vnegative_prompts = props.negativePrompt.split(',').map((item: any) => {
          return {en: item, zh: item}
      })
      form.value.negative_prompts = disposePrompts(form.value.vnegative_prompts)
  }else {
        form.value.vnegative_prompts = Array.from(defaultNegativePrompts)
        form.value.negative_prompts = disposePrompts(form.value.vnegative_prompts)
  }
  // 设置当前drawerWidth 宽度
  scrollerWidth.value = window.innerWidth - 300;
  window.addEventListener('resize', handleResize);
})

// 窗口宽度变化
const handleResize = () => {
  scrollerWidth.value = window.innerWidth - 300;
}


const loadCategory = () =>{
  let code = props.code
  if(props.code == null || props.code == ''){
    code = "01"
  }
  promptControllerApi.getStableDiffusion(code).then(res =>{
    if(res.code === 200){
      tagCategory.value = res.data
      isPromptChecked()
    }else {
      window.$message.error(res.msg)
    }
  })
}

const isPromptChecked = () => {
    const normalArray = Array.from(form.value.vprompts)
    console.log(normalArray)
    tagCategory.value.forEach((item:any) => {
        item.children.forEach((child:any) => {
            child.attributes.forEach((attr:any) => {
                const match = normalArray.find(i => i.en === attr.en);
                // 设置 checked 字段
                attr.checked = match ? true : false;
                console.log( attr.checked)
            })
        })
    })

}
const emit = defineEmits()
const emitLoadPromptEvent = () =>{
    emit('loadPromptEvent', form.value.prompts,form.value.negative_prompts)
}

onMounted(() => {
  loadCategory()
})


</script>
